<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选择终点的公交换乘查询</title>
    <script type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1Ft3QXPFRTdpQgrFSBRXeX6SfznICmeO">

    </script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #result{
            position: fixed;
            top: 10px;
            right: 20px;
            width: 250px;
            height: 450px;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
        .result_title{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #00BFFF;
            border-radius: 7px 7px 0px 0px;
            color: #fff;
        }
        #result_list{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .result_list_li{
            color: #000;
            padding: 10px;
            font-size: 14px;
            border-bottom: 1px solid #D3D3D3
        }
        .result_list_li:hover{
            cursor: pointer;
            background: #00BFFF;
        }
    </style>
</head>
<body>
<div id='container'></div>
<div id='result'>
    <p class='result_title'>起点：<span>软件园</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;终点：中山医院</span></p>
    <ul id='result_list'></ul>
</div>
<script>
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(118.054364,24.617279), 11);
    map.enableScrollWheelZoom();
    var start = '软件园', end = '中山医院';
    var transit = new BMapGL.TransitRoute(map, {
        renderOptions: {map: map},
    });
    var localSearch = new BMapGL.LocalSearch(map, {
        onSearchComplete: function(results){
            //获取当前页的结果数
            var html=``;
            for(var i = 0;i < results.getCurrentNumPois(); i++){
                html += `<li class='result_list_li' data-lat=${results.getPoi(i).point.lat} data-lng=${results.getPoi(i).point.lng}>${results.getPoi(i).title}</li>`
            }
            $('#result_list').html(html);
        }
    });
    localSearch.search(end);
    $('#result_list').on('click', 'li', function(){
        for(var i = 0;i < $('#result_list li').length; i++){
            $('#result_list li').css('background', '#fff')
        }
        $(this).css('background', '#00BFFF');
        var lat = Number($(this).attr('data-lat'));
        var lng = Number($(this).attr('data-lng'));
        //地址解析
        var myGeo = new BMapGL.Geocoder();
        myGeo.getPoint(start, function(point){
            if(point){
                var startPoint = new BMapGL.Point(118.059395,24.612685);
                var endPoint = new BMapGL.Point(lng, lat);
                transit.search(startPoint, endPoint);
            }
        })

    })
</script>
</body>
</html>